<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"  /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/JavaScript" src="js/jquery-1.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(e){

$("#username").change(function(e){
var pattern = /[\w]{8,20}/

var email=$("#username").val();
if(email==''){
$("#unSpan").html("用户名不能为空");
$("#unSpan").show();
$("#submit").hide();
return false;

}else if(!pattern.test(email)){
$("#unSpan").html("用户名格式不正确（只能包含数字和字母长度不低于8位，不超过20位）");
$("#unSpan").show();
$("#submit").hide();
return false;

}else{
$("#unSpan").hide();
$("#submit").show();
} 
});


$("#password").blur(function(e){
var pwd1=$("#password").val();
if(pwd1==''){
$("#spanPwd1").html("密码不能为空");
$("#spanPwd1").show();
$("#submit").hide();
/*|| pwd1.length>15*/
}else if(pwd1.length<8){
$("#spanPwd1").html("密码不能少于8位，或者高于15位");
$("#spanPwd1").show();
$("#submit").hide();
}else{
$("#spanPwd1").hide();
$("#submit").show();
}
});
$("#password2").blur(function(e){
var pwd2=$("#password2").val();
if(pwd2==''){
$("#spanPwd2").html("密码不能为空");
$("#spanPwd2").show();
$("#submit").hide();
}else if(pwd2!=$("#password").val()){
$("#spanPwd2").html("两次密码不一致");
$("#spanPwd2").show();
$("#submit").hide();
}else{
$("#spanPwd2").hide();
$("#submit").show();
}
});
$("#phoneNum").blur(function(e){
var phone=$("#phoneNum").val();
var num=/[0-9]{11}/
if(phone==''){
$("#spanPhoneNum").html("电话不可以为空");
$("#spanPhoneNum").show();
$("#submit").hide();
return false;
}else if(!num.test(phone)){
$("#spanPhoneNum").html("请输入正确的电话号码");
$("#spanPhoneNum").show();
$("#submit").hide();
return false;
}else{
$("#spanPhoneNum").hide();
$("#submit").show();
}
});
$("#check").click(function () {  
        var username=$("#username").val();
       if(username==""){
       $("#checkResult").html("不能为空");	
       }else{
        var val={"username":username};
        var url="result/register.action";
        var args={"username":val};
		$.post(url,val,function(result){
			$("#checkResult").html(result.result);	
		});
       }
		return false;
});   	
$("#submit").click(function(){
			var name=$("#name").val();
			if(name.length>6){
			$("#spanName").html("昵称不能超过6个字符");
			return false;
			}else if(name==""){
			$("#spanName").html("昵称不能为空");
			return false;
			}
				var phone=$("#phoneNum").val();
				var num=/[0-9]{11}/
				if(phone==''){
				$("#spanPhoneNum").html("电话不可以为空");
				return false;
				}else if(!num.test(phone)){
				$("#spanPhoneNum").html("请输入正确的电话号码");
				return false;
				}
});	
    });
</script>

   <body style="background:#FFF0F5">
    	<div  style="width: 100%; height: 40px;padding-top:5px;background:#EED8AE;margin: auto; ">
        <div class="row">
          <div class="col-md-3 col-md-offset-2"><span class="h3" style="color:blue">搞着玩论坛</span></div>
          <div class="col-md-1 col-md-offset-4"><a href="main/bbsList!BbsList.action" class="a">首页<span class="glyphicon glyphicon-home"></span></a></div>
          <div class="col-md-1"> <a href="login.jsp" class="a">登陆<span class="glyphicon glyphicon-log-in"></span></a></div>
          <div class="col-md-1"><a href="#" class="a">注册<span class="glyphicon glyphicon-user
             "></span></a></div>
        </div>
      </div>	
      <div  style="height: 120px;width:100%;">
          <img src="image/registerTitle.png" class="img" width="100%">
      </div>
      <div class="container" style="height: 50px ;margin-top:20px ">
          <h4 class="h3">欢迎您注册我的论坛！</h4> 
      </div>
     <div style="width: 100%;height: 40%;margin-top:20px;">
			<form action="main/user!add" method="post">

					<label style="margin-left: 600px;color: #080808;font-size: 16px">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号(*为必填项)</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="unSpan"></span>
					<div class="input-group" style="width: 40%;margin: auto;" >  
					<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
					<input type="text" id="username" placeholder="请输入用户名*" class="form-control" name="username">	
					<button class="btn-success" id="check">校验是否可用</button> 
					<span style="color:blue;" id="checkResult"></span>
					</div>
					<label style="margin-left: 600px;color: #080808;font-size: 16px;margin-top: 10px">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPwd1"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="glyphicon glyphicon-briefcase"></span></div>
					<input type="password" placeholder="请输入您的密码*" class="form-control" name="password" id="password">	
					</div>
					<label style="margin-left: 600px;color: #080808;font-size: 16px;margin-top: 10px">重&nbsp;&nbsp;&nbsp;&nbsp;复&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPwd2"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="glyphicon glyphicon-briefcase"></span></div>
					<input type="password" placeholder="请重复您的密码*" class="form-control" id="password2">	
					</div>
					<label style="margin-left: 600px;color: #080808;font-size: 16px;margin-top: 10px">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPhoneNum"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></div>
					<input type="text" placeholder="请输入您的电话*" class="form-control" id="phoneNum" name="phoneNum">	
					</div>
					<label style="margin-left: 600px;color: #080808;font-size: 16px;margin-top: 10px">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanName"></span>
					<div class="input-group" style="width: 40%;margin: auto;">  
					<div class="input-group-addon"><span class="glyphicon glyphicon-heart-empty"></span></div>
					<input type="text" placeholder="请输入您的昵称*" class="form-control" id="name" name="name">	
					</div>
					<input id="submit" type="submit" class="btn-info" value="提交" style="margin-left: 63%;margin-top: 20px;width:90px" id="submit">
			</form>
     </div>
      
   </body>
  
</html>
